<template>
  <div>
    <el-divider>基本信息</el-divider>
    <div class="dialog_left children">
      <el-descriptions direction="vertical" :column="4" border>
        <el-descriptions-item label="申请单号" :labelStyle="labelStyle">{{ form.outsourceNum || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="设备编号">{{
        form.repairVo && form.repairVo.repairEquipmentAccountVo.eaPartInfoVo.equipmentNum || '-'
        }}</el-descriptions-item>
        <el-descriptions-item label="设备名称">{{
        form.repairVo && form.repairVo.repairEquipmentAccountVo.eaPartInfoVo.equipmentName || '-'
        }}
        </el-descriptions-item>
        <el-descriptions-item label="规格型号">{{
        form.repairVo && form.repairVo.repairEquipmentAccountVo.eaPartInfoVo.model || '-'
        }}</el-descriptions-item>
        <el-descriptions-item label="供应商" :labelStyle="labelStyle">{{
        form.repairVo && form.repairVo.repairEquipmentAccountVo.eaPartInfoVo.supplierName || '-'
        }}</el-descriptions-item>
        <el-descriptions-item label="设备状态">
          <div
            :style="'color:' + ['#67C23A', '#E6A23C', '#409EFF', '#F56C6C'][form.repairVo && form.repairVo.repairEquipmentAccountVo.status]">
            <i
              :class="['el-icon-circle-check', 'el-icon-warning-outline', 'el-icon-remove-outline', 'el-icon-circle-close'][form.repairVo && form.repairVo.repairEquipmentAccountVo.status]" />
            <span>
              {{ ['正常', '带病运行', '检修中', '故障'][form.repairVo && form.repairVo.repairEquipmentAccountVo.status] }}
            </span>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="所属部门">{{
        form.repairVo && form.repairVo.repairEquipmentAccountVo.eaPartInfoVo.deptName || '-'
        }}</el-descriptions-item>
        <el-descriptions-item label="位置">{{
        form.repairVo && form.repairVo.repairEquipmentAccountVo.eaPartInfoVo.placeName || '-'
        }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <el-divider>故障信息</el-divider>
    <div class="dialog_left children">
      <el-descriptions :column="4" border>
        <el-descriptions-item label="故障等级" :span="4" :labelStyle="labelStyle">
          <div :style="'color:' + ['#F56C6C', '#E6A23C', '#409EFF'][form.repairVo && form.repairVo.faultLevel]">
            <!-- <i :class="['el-icon-circle-close', 'el-icon-success', 'el-icon-remove'][row.faultLevel]" /> -->
            <span>
              {{ ['紧急 ', '严重 ', '一般'][form.repairVo && form.repairVo.faultLevel] }}
            </span>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="故障描述" :span="4" :labelStyle="labelStyle">
          {{ form.repairVo && form.repairVo.faultDescribe || '-' }}</el-descriptions-item>
        <el-descriptions-item label="故障图片" :span="4" :labelStyle="labelStyle">
          <div v-if="repairImages(form.repairVo && form.repairVo.repairImages, 0).length">
            <Image-preview v-for="(item, i) in repairImages(form.repairVo && form.repairVo.repairImages, 0)"
              style="margin-left:20px" :key="i" :src="item.image" width="100px" height='100px'></Image-preview>
          </div>
          <div v-else style="color: #ccc;">
            暂无图片信息
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="故障视频" :span="4" :labelStyle="labelStyle">
          <video v-if="form.repairVo && form.repairVo.faultVideo" :src="form.repairVo && form.repairVo.faultVideo"
            width="390" height="200" style="background-color: black" controls="controls">
            您的浏览器不支持视频播放
          </video>
          <div v-else style="color: #ccc;">暂无视频信息</div>

        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div v-if="form.selectMode == 1">
      <el-divider>委外服务商</el-divider>
      <div class="dialog_left children">
        <div class="suppliertitle">
          <div>服务商选定</div>
          <div style="margin-left: 20px;">{{['指定服务商','比选服务商'][form.selectMode]||'-'}}</div>
        </div>
      </div>
      <el-table :data="form.supplierCompares" max-height="550px" style="width: 100%">
        <el-table-column label="序号" width="100">
          <template slot-scope="scope">
            <div> {{ scope.$index + 1 }} </div>
          </template>
        </el-table-column>
        <el-table-column prop="supplierName" label="供应商名称" min-width="160" />
        <el-table-column prop="address" label="地址" min-width="160" />
        <el-table-column prop="contact" label="联系人" min-width="160" />
        <el-table-column prop="telephone" label="联系电话" show-overflow-tooltip min-width="160">
          <template slot-scope="{row}">
            <div> {{ row.telephone || '-' }} </div>
          </template>
        </el-table-column>
        <el-table-column prop="website" label="官网" show-overflow-tooltip min-width="160">
          <template slot-scope="{row}">
            <div> {{ row.website || '-' }} </div>
          </template>
        </el-table-column>
        <el-table-column prop="file" label="附件" min-width="160">
          <template slot-scope="scope">
            <el-link :disabled="!(scope.row.file)" icon="el-icon-document" type="primary" :href=" scope.row.file"
              target="_blank">
              附件资料</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="website" label="供应商特点描述" show-overflow-tooltip min-width="160">
          <template slot-scope="{row}">
            <div> {{ row.description || '-' }} </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220" fixed="right">
          <template slot-scope="scope">
            <el-button size="small" type="primary" icon="el-icon-view" @click="handleSelectImage(scope.row.image)">
              图片
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-divider>比选结果</el-divider>
    <div class="dialog_left children">
      <div style="margin:0 0 15px 0;color: red;font-size: 12px;">注：审核通过后，新服务商将自动加入供应商管理模块中
      </div>
      <div class="suppliertitle">
        <div>选定服务商：</div>
        <div style="margin-left: 10px;">{{form.selectSupplierName||'-'}}</div>
      </div>
      <div class="suppliertitle">
        <div style="margin-left: 15px;">选定原因：
        </div>
        <div style="margin-left: 10px;">{{form.selectSupplierReason ||'-'}}</div>
      </div>
    </div>
    <el-divider>处理信息</el-divider>
    <div class="dialog_left children">
      <div class="rule_form_right">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="80px" class="rule-form">

          <el-form-item label="故障原因" prop="faultReason">
            <el-input type="textarea" placeholder="请输入故障原因" v-model="ruleForm.faultReason" maxlength="200"
              :autosize="{ minRows: 4, maxRows: 4}" show-word-limit />
          </el-form-item>

          <el-form-item label="处理结果" prop="treatmentResult">
            <el-select v-model="ruleForm.treatmentResult" placeholder="请选择处理结果">
              <el-option v-for="(item, i) in ['已解决', '故障']" :key="i" :label="item" :value="i">
              </el-option>
            </el-select>
          </el-form-item>
          <div v-if="ruleForm.treatmentResult == 0">
            <el-form-item label="处理内容" prop="treatmentContent">
              <el-input type="textarea" placeholder="请输入处理内容" v-model="ruleForm.treatmentContent" maxlength="200"
                :autosize="{ minRows: 4, maxRows: 4}" show-word-limit />
            </el-form-item>
            <el-form-item label="预防措施">
              <el-input type="textarea" placeholder="请输入预防措施" v-model="ruleForm.precaution" maxlength="200"
                :autosize="{ minRows: 4, maxRows: 4}" show-word-limit />
            </el-form-item>
            <el-form-item label="换下配件">
              <el-select v-model="ruleForm.ecrRemoveRecords" multiple placeholder="请选择换下配件（可多选）">
                <el-option v-for="item in ReplaceRecordList" :key="item.ecrRecordId" :label="item.materialName"
                  :value="item.ecrRecordId">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <el-divider>处理附件：处理图片/处理视频</el-divider>
          <el-form-item label="处理图片">
            <Image-upload :value='ruleForm.repairImages' @input="handleInput" />
          </el-form-item>
          <el-form-item label="处理视频">
            <Video-upload ref="videoUpload" v-model="ruleForm.treatmentVideo" @returnBack="handleReturnBack" />
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 图片显示组件 -->
    <template v-if="ImageOpen">
      <Dialog-image :src="imageSrc" />
    </template>
    <div align="center" class="dialog-footer">
      <el-button type="primary" @click="handleConfirm">提交</el-button>
      <el-button @click="handleClose">取消</el-button>
    </div>
  </div>
</template>

<script>
import { listDetail, listreplaceRecord, assignPut } from '@/api/maintenance/management/Outsourcing.js'

/** 表单参数 ------------------------------------------------------------------------------------------------------------------------ */
const ruleForm = {
  faultReason: '',//故障原因
  treatmentResult: 0,//处理结果
  treatmentContent: '',//处理内容
  precaution: '',//预防措施
  ecrRemoveRecords: [],//换下配件 集合
  repairImages: [],//处理图片 集合
  treatmentVideo: '',//处理视频
}

// 提交处理完毕处理函数-----------------------------
function processRuleForm (ruleForm) {
  const data = Object.assign({}, ruleForm)
  const arr = ruleForm.ecrRemoveRecords.map(item => {
    return {
      ecrRecordId: item
    }
  })
  const imgs = ruleForm.repairImages.map(item => {
    return {
      image: item.url,
      type: '1'
    }
  })
  data.repairImages = imgs
  data.ecrRemoveRecords = arr
  return data
}
export default {
  name: 'detailed',
  props: {
    parentid: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      form: {},//基本信息
      ReplaceRecordList: [],//换下配件数组
      ruleForm: Object.assign({}, ruleForm),
      //label样式
      labelStyle: { 'width': '405.5px' },
      imageSrc: undefined,//图片预览参数
      ImageOpen: false,
      /** 表单规则 --------------------------------------------------------------------------------------------------------------------- */
      rules: {
        faultReason: [
          { required: true, message: '请输入故障原因', trigger: 'blur' }
        ],
        treatmentResult: [
          { required: true, message: '请选择处理结果', trigger: 'change' }
        ],
        treatmentContent: [
          { required: true, message: '请输入处理内容', trigger: 'blur' }
        ],
        repairImages: [
          { required: true, message: '请上传处理图片', trigger: 'change' }
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
      }
    }
  },
  created () {
    this.getlist()
  },
  methods: {
    getlist () {
      // 详情信息
      listDetail(this.parentid).then((res) => {
        this.form = res.data
        this.$set(this.ruleForm, 'sourceId', res.data.outsourceId)
        this.handleListreplaceRecord(res.data.repairVo.equipmentAccountId, res.data.repairNum)
      })
    },
    handleListreplaceRecord (id, userid) {
      // 传已换下参数status，0 使用中 1已换下
      listreplaceRecord({ status: 1, equipmentAccountId: id, useNum: userid }).then(res => {
        this.ReplaceRecordList = res.data
      })
    },
    repairImages (arr, val) {
      if (arr == undefined || arr.length == 0) {
        return []
      }
      let data = []
      if (val) {
        data = arr.filter(item => {
          return item.type != 0
        })
      } else {
        data = arr.filter(item => {
          return item.type == 0
        })
      }
      return data
    },
    // 上传图片处理方法-----------------
    handleInput (val) {
      this.ruleForm.repairImages = val
    },
    // 上传视频处理方法--------------------
    handleReturnBack (val) {
      this.ruleForm.treatmentVideo = val
    },
    // 提交表单---------------------------------------------------------
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.ruleForm.repairImages.length || this.ruleForm.treatmentVideo) {
            const data = processRuleForm(this.ruleForm)
            assignPut(data).then((res) => {
              this.$message({
                message: '维修完毕！',
                type: 'success'
              })
              this.handleClose()
            })
          } else {
            this.$message({
              message: '请上传处理图片或者处理视频！',
              type: 'error'
            })
          }

        } else {
          this.$message({
            message: '数据验证不通过，检查输入表单',
            type: 'error'
          })
          return false
        }
      })
    },

    // 关闭窗口，重置表单
    handleClose () {
      this.ruleForm = Object.assign({}, ruleForm)
      this.$refs.videoUpload.clearVideo() //删除视频
      this.$emit('repairedform_submit_click');
    },
    handleConfirm () {
      this.submitForm('ruleForm')
    },
    handleSelectImage (src) {
      this.imageSrc = src
      this.ImageOpen = true
    },
  }
}
</script>

<style lang="scss" scoped>
.center_dialog {
  width: 90%;
  margin: 0px auto;
}

.dialog_left {
  width: 100%;
}

.image_flex {
  display: flex;
}

// .dialog_left>div:nth-child(1){
//   flex:1
// }
// .dialog_left>div:nth-child(2){
//   flex:10;
//   margin-left:10px
// }
/* el-descriptions-item 文字居中 */
::v-deep .el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
  text-align: center;
}

.contentStyle {
  width: 200px;
}

.suppliertitle {
  display: flex;
  font-size: 14px;
  color: #000;
  margin-top: 10px;
}
</style>